<template>
  <div>
    <div class="bg-grey light padding-lr-xs">
      <vxe-form ref="testForm1Ref" class-name="bg-grey light" title-align="left" title-width="80" :data="testForm1">
        <vxe-form-item title="编号" span="6" field="code">
          <template #title>
            <span class="padding-lr-xs">编号</span>
          </template>
          <template #default="{ data }">
            <vxe-input v-model="data.code" clearable></vxe-input>
          </template>
        </vxe-form-item>
        <vxe-form-item title="开始时间" span="6" field="s">
          <template #title>
            <span class="padding-lr-xs">开始时间</span>
          </template>
          <template #default="{ data }">
            <vxe-input v-model="data.s" type="date" :value-format="'yyyy-MM-dd'" :label-format="'yyyy-MM-dd'" clearable transfer></vxe-input>
          </template>
        </vxe-form-item>
        <vxe-form-item title="结束时间" span="6" field="e">
          <template #title>
            <span class="padding-lr-xs">结束时间</span>
          </template>
          <template #default="{ data }">
            <vxe-input v-model="data.e" type="date" :value-format="'yyyy-MM-dd'" :label-format="'yyyy-MM-dd'" clearable transfer></vxe-input>
          </template>
        </vxe-form-item>
        <vxe-form-item title="时长" span="6" field="sc">
          <template #title>
            <span class="padding-lr-xs">时长</span>
          </template>
          <template #default="{ data }">
            <vxe-input v-model="data.sc"></vxe-input>
          </template>
        </vxe-form-item>
      </vxe-form>
    </div>
    <vxe-toolbar class-name="bg-grey light" v-if="step===2">
      <template #tools>
        <vxe-button type="text" class="button-blue margin-lr-xs" class-name="margin-lr-xs" content="刷新"></vxe-button>
        <vxe-button type="text" class="button-blue margin-lr-xs" class-name="margin-lr-xs" content="新增"></vxe-button>
        <vxe-button type="text" class="button-red margin-lr-xs" content="删除"></vxe-button>
      </template>
    </vxe-toolbar>
    <vxe-toolbar class-name="bg-grey light" v-if="step===3"><!--培养-->
      <template #tools>
        <vxe-button type="text" class="button-blue margin-lr-xs" class-name="margin-lr-xs" content="刷新"></vxe-button>
        <vxe-button type="text" class="button-blue margin-lr-xs" class-name="margin-lr-xs" content="新增"></vxe-button>
        <vxe-button type="text" class="button-red margin-lr-xs" content="删除"></vxe-button>
      </template>
    </vxe-toolbar>
    <vxe-toolbar class-name="bg-grey light" v-if="step===4">
      <template #tools>
        <vxe-button type="text" class="button-blue margin-lr-xs" class-name="margin-lr-xs" content="刷新"></vxe-button>
        <vxe-button type="text" class="button-blue margin-lr-xs" class-name="margin-lr-xs" content="无菌生长"></vxe-button>
        <vxe-button type="text" class="button-blue margin-lr-xs" class-name="margin-lr-xs" content="菌落形态"></vxe-button>
        <vxe-button type="text" class="button-red margin-lr-xs" content="删除"></vxe-button>
      </template>
    </vxe-toolbar>
    <vxe-toolbar class-name="bg-grey light" v-if="step===5">
      <template #tools>
        <vxe-button type="text" class="button-blue margin-lr-xs" class-name="margin-lr-xs" content="刷新"></vxe-button>
        <vxe-button type="text" class="button-blue margin-lr-xs" class-name="margin-lr-xs" content="默认染色"></vxe-button>
        <vxe-button type="text" class="button-blue margin-lr-xs" class-name="margin-lr-xs" content="染色"></vxe-button>
        <vxe-button type="text" class="button-red margin-lr-xs" content="删除"></vxe-button>
      </template>
    </vxe-toolbar>
    <vxe-toolbar class-name="bg-grey light" v-if="step===6">
      <template #tools>
        <vxe-button type="text" class="button-blue margin-lr-xs" class-name="margin-lr-xs" content="刷新"></vxe-button>
        <vxe-button type="text" class="button-blue margin-lr-xs" class-name="margin-lr-xs" content="抗生素"></vxe-button>
        <vxe-button type="text" class="button-blue margin-lr-xs" class-name="margin-lr-xs" content="药敏组"></vxe-button>
        <vxe-button type="text" class="button-red margin-lr-xs" content="删除"></vxe-button>
      </template>
    </vxe-toolbar>
    <vxe-toolbar class-name="bg-grey light" v-if="step===7">
      <template #tools>
        <vxe-button type="text" class="button-blue margin-lr-xs" class-name="margin-lr-xs" content="刷新"></vxe-button>
        <vxe-button type="text" class="button-blue margin-lr-xs" class-name="margin-lr-xs" content="无菌生长"></vxe-button>
        <vxe-button type="text" class="button-blue margin-lr-xs" class-name="margin-lr-xs" content="菌落形态"></vxe-button>
        <vxe-button type="text" class="button-red margin-lr-xs" content="删除"></vxe-button>
      </template>
    </vxe-toolbar>
    <div>
      <vxe-table border show-overflow :data="tableData" :column-config="{ resizable: true }" :edit-config="{ trigger: 'click', mode: 'cell' }">
        <vxe-column type="seq" width="60"></vxe-column>
        <vxe-column field="name" title="Name" :edit-render="{ autofocus: '.vxe-input--inner' }">
          <template #edit="{ row }">
            <vxe-input v-model="row.name" type="text"></vxe-input>
          </template>
        </vxe-column>
        <vxe-column field="role" title="Role" :edit-render="{}">
          <template #edit="{ row }">
            <vxe-input v-model="row.role" type="text" placeholder="请输入昵称"></vxe-input>
          </template>
        </vxe-column>
        <vxe-column field="sex" title="Sex" :edit-render="{}">
          <template #default="{ row }">
            <span>{{ formatSex(row.sex) }}</span>
          </template>
          <template #edit="{ row }">
            <vxe-select v-model="row.sex" transfer>
              <vxe-option v-for="item in sexList1" :key="item.value" :value="item.value" :label="item.label"></vxe-option>
            </vxe-select>
          </template>
        </vxe-column>
        <vxe-column field="sex2" title="多选下拉" :edit-render="{}">
          <template #default="{ row }">
            <span>{{ formatMultiSex(row.sex2) }}</span>
          </template>
          <template #edit="{ row }">
            <vxe-select v-model="row.sex2" multiple transfer>
              <vxe-option v-for="item in sexList1" :key="item.value" :value="item.value" :label="item.label"></vxe-option>
            </vxe-select>
          </template>
        </vxe-column>
        <vxe-column field="num6" title="Number" :edit-render="{}">
          <template #edit="{ row }">
            <vxe-input v-model="row.num6" type="number" placeholder="请输入数值"></vxe-input>
          </template>
        </vxe-column>
        <vxe-column field="date12" title="Date" :edit-render="{}">
          <template #edit="{ row }">
            <vxe-input v-model="row.date12" type="date" placeholder="请选择日期" transfer></vxe-input>
          </template>
        </vxe-column>
        <vxe-column field="date13" title="Week" :edit-render="{}">
          <template #edit="{ row }">
            <vxe-input v-model="row.date13" type="week" placeholder="请选择日期" transfer></vxe-input>
          </template>
        </vxe-column>
        <vxe-column field="address" title="Address" :edit-render="{}">
          <template #edit="{ row }">
            <vxe-input v-model="row.address" type="text"></vxe-input>
          </template>
        </vxe-column>
      </vxe-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, getCurrentInstance, defineProps } from "vue";


let { proxy }: any = getCurrentInstance();

const props = defineProps({
  step: {
    type: Number,
    default: 1,
  },
  tabs: {
    type: Array,
    default: reactive([
      {
        title: "Step 1",
        iconSuccess: null,
        isValid: true,
      },
      {
        title: "Step 2",
        iconSuccess: null,
        isValid: true,
      },
      {
        title: "Step 3",
        iconSuccess: null,
        isValid: true,
      },
    ]),
  },
  finalize: {
    type: Function,
    default: function () {
      return {};
    },
  },
  backText: {
    type: String,
    default: "Back",
  },
  nextText: {
    type: String,
    default: "Next",
  },
  doneText: {
    type: String,
    default: "Done",
  },
  loading: {
    type: Boolean,
    default: false,
  },
  primaryColor1: {
    type: String,
    default: "orange",
  },
  primaryColor2: {
    type: String,
    default: "#fff",
  },
  backgroundColor: {
    type: String,
    default: "#fff",
  },
  circleSize: {
    type: Number,
    default: 24,
  },
});
interface RowVO {
  id: number
  name: string
  nickname: string
  role: string
  sex: string
  sex2: string[]
  num1: number
  age: number
  address: string
  date12: string
  date13: string
}

let testForm1 = reactive({
  code: '',
  s: '',
  e: '',
  sc: ''
});

const tableData = ref<RowVO[]>([
  { id: 10001, name: 'Test1', nickname: 'T1', role: 'Develop', sex: '0', sex2: ['0'], num1: 40, age: 28, address: 'Shenzhen', date12: '', date13: '' },
  { id: 10002, name: 'Test2', nickname: 'T2', role: 'Designer', sex: '1', sex2: ['0', '1'], num1: 20, age: 22, address: 'Guangzhou', date12: '', date13: '2020-08-20' },
  { id: 10003, name: 'Test3', nickname: 'T3', role: 'Test', sex: '0', sex2: ['1'], num1: 200, age: 32, address: 'Shanghai', date12: '2020-09-10', date13: '' },
  { id: 10004, name: 'Test4', nickname: 'T4', role: 'Designer', sex: '1', sex2: ['1'], num1: 30, age: 23, address: 'Shenzhen', date12: '', date13: '2020-12-04' }
]);

const sexList1 = ref([
  { label: '', value: '' },
  { label: '男', value: '1' },
  { label: '女', value: '0' }
]);

const formatSex = (value: string) => {
  if (value === '1') {
    return '男'
  }
  if (value === '0') {
    return '女'
  }
  return ''
}

const formatMultiSex = (values: string[]) => {
  if (values) {
    return values.map(val => formatSex(val)).join(',')
  }
  return ''
}
</script>

<style scoped lang="scss"></style>
